<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#" target="_blank" title="标签" class="link">link</a>
    <div id="box1">第1块内容</div>
    <div class="box2">第2块内容</div>
    <div class="box3">第3块内容</div>
    <div class="box33">
        <ul>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
        </ul>
    </div>
    
    <div class="header">
        <span>
            <a href="#">span-A</a>
        </span>
        <span>
            <em>span-em</em>
        </span>
    </div>
    <div class="box">
        <ul>
            <li>22222</li>
            <li>22222</li>
            <li>22222</li>
        </ul>
    </div>
    <script>
        // 1.getElementById():获取特定id的元素节点
        // console.log(document.getElementById('box1'));
        // alert(box1);//[object HTMLDivElement]

        // 2.getElementsByTagName() 获取相同的元素的节点哦列表,返回类数组,使用[]来获取
        // console.log(document.getElementsByTagName('div')[3]);

        // 3.getElementsByClassName() 获取元素节点
        // console.log(document.getElementsByClassName('box2')[1]);

        // 4.类名进行操作
    //   var aaa= document.getElementsByClassName('link')[0]; 
    //   console.log(aaa);//元素对象
    //   console.log(aaa.href);
    //   console.log(aaa.title);
    //   console.log(aaa.className);
      

//     5.重点:querySelector()
//     - querySelector` 是按照选择器的方式来获取元素
//     - 也就是说，按照我们写 `css` 的时候的选择器来获取
//     - 这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素   

        // var spana=document.querySelector(".header span em");
        // console.log(spana);

        // var spana=document.querySelector("#box1");
        // console.log(spana);



//    6. querySelectorAll
//     - `querySelectorAll` 是按照选择器的方式来获取元素
//     - 这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回
    
    // console.log(document.querySelectorAll(".box ul"));
    
    </script>

    案例:
    <script>
        var list=document.querySelectorAll('.box ul li');
        console.log(list);
        list.forEach(function(item){
            // console.log(item);
            item.onclick=function(){
                alert('abc')
            }
        })
    </script>
    

</body>
</html>